<template>
    <div>
        <m-card :icon = 'icon' :title="title">
         <div class="nav jc-between">
                <div class="nav-item" :class="{active:active === i}"
                v-for="(category,i) in categories" :key="i" @click="$refs.list.$swiper.slideTo(i)">
                    <div class="nav-link">
                        {{category.name}}
                    </div>
                </div>
        </div>
     <div class="pt-3">
         <swiper ref="list" :options = "{autoHeight:true}" @slide-change = '()=> active = $refs.list.$swiper.activeIndex'>
            <swiper-slide v-for="(category,i) in categories" :key="i">
                <slot name="item" :category = 'category'></slot>
            </swiper-slide>
        </swiper>  
     </div>
    </m-card>
    </div>
</template>

<script>
export default {
    name: 'VueCardlist',
    props:{
        title:{type:String,required:true},
        icon:{type:String,required:true},
        categories:{type:Array,required:true},
    },
    data() {
        return {
            active:0
        }
    },
    
};
</script>

<style lang="scss" scoped>

</style>